<template>
  <div class="setting">
    <el-tabs v-model="activeName">
      <el-tab-pane label="用户管理" name="first">
        <el-button type="primary" size="mini" @click="addRole">
          + 新增部门
        </el-button>
        <el-tabs>
          <el-table
            :data="listData"
            style="width: 100%"
            border
            class="tableWth"
          >
            <el-table-column
              prop="date"
              type="index"
              label="序号"
              sortable
              width="180"
            />

            <!-- 角色名 -->
            <el-table-column prop="name" label="角色名" sortable />

            <!-- 描述 -->
            <el-table-column
              prop="description"
              label="描述"
              sortable
              width="900"
            />

            <!-- 操作 -->
            <el-table-column label="操作" sortable>
              <template slot-scope="{ row }">
                <el-button size="mini" type="text" @click="role(row)">
                  分配权限
                </el-button>
                <el-button size="mini" type="text" @click="emit(row)">
                  修改
                </el-button>
                <el-button size="mini" type="text" @click="del(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>

        <!-- 修改弹窗 -->
        <el-dialog title="新增" :visible.sync="emitShow">
          <el-form ref="form" :model="emitRole" label-width="80px">
            <el-form-item label="角色名称">
              <el-input v-model="emitRole.name" />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="emitRole.description" />
            </el-form-item>
            <!-- 按钮 -->
            <div class="but">
              <el-form-item>
                <el-button @click="emitShow = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-dialog>

        <!-- 分配权限弹窗 -->
        <el-dialog title="新增" :visible.sync="roleShow">
          <el-tree
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </el-dialog>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>

      <!-- 配置管理 -->
      <el-tab-pane label="配置管理" name="second">
        <SetRole />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="js">

// 导入 配置管理 组件
import SetRole from '@/views/setting/component/setRole'
import {
  // 获取数据列表
  getRoleListApi,
  // 根据 id 删除部门
  getDelRoleApi,
  // 根据部门 编辑部门
  getRolePageApi,
  getRoleRoleApi,
  getAddBaseApi,
  getAddRoleApi } from '@/api/setting.js'
import { getPrincipalApi } from '@/api/employee.js'

export default {
  name: 'Setting',
  components: {
    SetRole
  },
  data() {
    return {
      // 树状结构
      arborescence: [],

      // title: this.emitRole.id ? '新增' : '修改',
      // 一页多少条数据
      pageSizes: [5, 10, 15, 20, 25, 30],
      // 每一页多少条数据
      pageSize: 5,
      // 分页
      page: 1,
      // 总条数
      total: 0,
      // 当前页码
      currentPage: 1,
      activeName: 'first',
      // 列表数据源
      listData: [],
      // 分配权限 dialog
      roleShow: false,
      // 修改面板
      emitShow: false,
      // 权限分配
      roleData: [],
      // 编辑角色
      emitRole: {
        // 角色名
        description: '',
        // 描述
        name: '',
        // id
        id: ''

      }
    }
  },

  created() {
    this.handleCurrentChange()
    this.getEmpList()
  },
  component: {
    // titleId() {
    //   return this.titleId ? '新增' : '修改'
    // }
  },
  methods: {
    // 权限分配面板
    role(row) {
      this.roleShow = true
    },

    // 新增角色
    async addRole() {
      this.emitShow = true
      await getAddRoleApi(this.emitRole)
      this.emitRole = {
        description: '',
        name: ''

      }
    },
    // 删除
    del(row) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await getDelRoleApi(row.id)
        this.getEmpList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      this.getEmpList()
      if (this.listData.length === 1 && this.page !== 1) {
        this.page--
        this.getEmpList()
      } else {
        this.getEmpList()
      }
    },
    // 获取角色列表
    async getEmpList() {
      const res = await getRoleListApi({
        page: this.page,
        pagesize: this.pageSize
      })

      this.listData = res.data.rows
      this.total = res.data.total
      // this.titleId = res.data.rows[0].id
    },

    // 修改弹窗提交
    async submit() {
      if (this.emitRole.id) {
        // 有 id 就是编辑面板
        console.log(this.emitRole)
        const res = await getAddBaseApi(this.emitRole)
        this.getEmpList()
        // 提示一下
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 关闭弹窗
        this.emitShow = false
      } else {
        // 新增数据的接口
        await getAddRoleApi(this.emitRole)
        // 更新数据
        getRoleListApi()
        // 提示成功
        this.$message(this.emitRole.id ? '修改成功' : '新增成功')
        this.getEmpList()
        // 清空表单
        this.emitRole = {
          // 角色名
          description: '',
          // 描述
          name: ''
        }
        // 关闭弹窗
        this.emitShow = false
      }

      // 清空数据
      this.emitRole = {
        description: '',
        name: ''
      }
      // this.emitRole = res.data.code
      // console.log(this.emitRole)
      // console.log(res)
    },
    // 修改面板
    emit(row) {
      this.emitShow = true
      this.emitRole = { ...row }
    },

    sizeChange(size) {
      // 修改页容量
      this.pageSize = size
      this.getEmpList()
    },
    // 当前页改变
    handleCurrentChange(page) {
      // 修改当前页
      this.page = page
      this.getEmpList()
    }
  }
}
</script>

<style lang="scss" scope>
.setting {
  margin: 50px 50px;
  .page {
    text-align: center;
  }
  .but {
    text-align: center;
  }
}
</style>
